<template>
  <div style="width: 190px;height:96px;overflow: hidden; position:relative;">
    <div style="height: 100%;width:100%;display: flex; align-items: center; justify-content: center;">
      <div style="display: inline-flex;max-width:100%;max-height: 100%;flex-direction: column;">
        <template v-if="item.listBlessings && item.listBlessings.length">
          <span v-for="(b, i) in item.listBlessings" :key="i" style="font-size: 18px;font-weight: bold;font-family: 字魂99号-仝斌手书; text-align: left;" :style="getStyle(item)">
            {{b}}
          </span>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    getStyle(item) {
      let maxSingleRowLength = 0 // 单行最大长度
      const rowTotal = item.listBlessings.length
      item.listBlessings.forEach(element => {
        if (element.length > maxSingleRowLength) {
          maxSingleRowLength = element.length
        }
      });
      const style = {
        'font-size': '18px'
      }
      if (rowTotal === 1 && maxSingleRowLength <= 6) {
        style['font-size'] = '30px'
      } else if (rowTotal <= 2 && maxSingleRowLength <= 7) {
        style['font-size'] = '26px'
      } else if (rowTotal <= 3 && maxSingleRowLength <= 8) {
        style['font-size'] = '22px'
      }
      return style
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
